<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本语法</title>
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<!-- 
        Promise是ES6引入的异步编程的新解决方案
        在语法上来说：Promise是一个构造函数
        从功能上来说：Promose对象用来封装一个异步操作并可以获取其成功或失败的结果值
        
        优点：
            1. 支持链式调用，可以解决回调地狱的问题
            2. 可以更好地进行异常处理


        Promise的状态：PromiseState
            pending 转 resolved / fullfilled  （成功）
            pending 转 rejected （失败）   

        Promise对象的值：PromiseResult
 -->
<body>
    <div class="container">
        <h2 class="page-header">Promise 初体验</h2>
        <button class="btn btn-primary" id="btn">点击抽奖</button>
    </div>
    <script>
        // 生成随机数
        function rand(m, n) {
            return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
        }

        // 获取元素对象
        const btn = document.querySelector('#btn');
        // 绑定单击事件
        btn.addEventListener('click', function () {
            const p = new Promise((resolve, reject) => { // 同步执行
                setTimeout(() => {
                    // 获取从1 - 100的一个随机数
                    let n = rand(1, 100);
                    //判断
                    if (n <= 30) {
                        resolve(n); // 将promise对象的状态设置为『成功』
                    } else {
                        reject(n); // 将promise对象的状态设置为『失败』
                    }
                }, 1000);
            });

            console.log(p);

            p.then((value) => { // promise对象状态成功时执行的回调函数
                alert('恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券, 您的中奖数字为 ' + value);
            }, (reason) => { // promise对象状态失败时执行的回调函数
                alert('再接再厉, 您的号码为 ' + reason);
            });
        });
    </script>
</body>
</html>